7. Webと実世界

2019 11/11

増井俊之

将来のインタフェースのトレンド

ユビキタスコンピューティング

AR

VR

IoT

Web活用

AI

将来のインタフェースのトレンド

Universal

Ubiquitous

User-centric

http://gyazo.com/de8b1f08b7b7cdb65dda4cf3dd0bd71c.png

Webの問題点

使えない場所が多い

風呂でググれない

レシピを台所でググれない

実世界情報が検索できない

家が火事になってもわからない

人気店を捜せない

パーソナル情報が検索できない

下北沢で会った人を捜せない

Webの実世界対応

実世界で使う

誰でもどこでも使える

実世界情報を利用する

渋滞情報、レストラン情報、自宅情報

あらゆるものがネットワークにつながる

IoT (Internet of Things)

実世界でWebを利用する例

新しいデバイスを利用

スライダでWebページをザッピング

気合いブックマーク

風呂でググる

新しい場所で使う

サイネージでパーソナル情報をチェックする

実世界情報をWebで利用する例

https://gyazo.com/82174232cc357d0afb5b8e6b21afbc92.png

http://www.water.go.jp/yoshino/ikeda/sameura/same_top.html https://gyazo.com/b94bcb2f2efcbcc06250d2704bb7dcd0.png

実世界指向インタフェース

パソコン入出力機器以外を使うインタフェース

Webに限らない

直観的なインタフェースの可能性

実世界の事物や状況を活用

机、紙、場所、時間、...

計算機がどこにあるかわからない

計算機データと実世界データの区別がない

e.g. 計算数内の数値と紙上の数字の区別がない

実世界指向インタフェースの例

自動ドア

Suica

Tangible Bits

AR

あらゆる実世界指向IFはWebと関連づけられる?

実世界指向インタフェースのための技術

インフラ

無線通信

計算機小型化

入力装置 / 状況検出装置

センサ

カメラ

バーコード (1D, 2D) / RFIDタグ

位置認識 (GPS, WiFi)

出力装置

薄型ディスプレイ

プロジェクタ

関連概念/用語

Ubiquitous Computing (Ubicomp)

Pervasive Computing

Cyber Physical System (CPS)

Augmented Reality (AR)

Virtualized Reality ( = Augmented Virtuality )

Mixed Reality ( = AR + AV )

Wearable Computer

Tangible Bits

実世界+Webのキーワード

新しい入出力デバイス

ユビキタス環境の認証技術

キーボードを利用しない

誰でもどこでも使える

情報共有技術

共有レベルの制御

IoT

Ubiquitous Computing

Mark Weiserの造語

実世界に沢山の計算機を埋め込んでおく

計算機は動かなくてよい

https://gyazo.com/25e19294a5d5882df7bbab0b50ab68dd

Mark Weiser

https://gyazo.com/bb0efafe130a31f6a66ad01e3b5e319c

The computer for the 21st century

https://gyazo.com/371440a5011fa05f176559d89440d3cd

Mark Weiserが「ユビキタスコンピューティング」を提唱

"Calm" technology

書き慣れたペン、履き心地のよい靴、あるいは朝配達される新聞にたとえている。

新しいデバイス例: FieldMouse

ID認識装置 + 動き検出装置

壁や机の上でマウスのように使える

FieldMouseを使った実世界GUI

https://gyazo.com/2593d8fafcf5b4074439079cca1f9d66.png

新しいデバイス例: MouseField

手軽な実世界I/Fデバイス

RFIDリーダと動き検出装置を一体化

https://gyazo.com/dcb16fd6194a15b459d2502ca627d2d1.png

MouseFieldの使用方法

「置いて動かす」だけで情報検索/制御

https://gyazo.com/e98258a8a47de176282e2ed148e7db18.png

書斎のMouseField

https://gyazo.com/f475336f971c564980a6368947e15180.png

テーブル型MouseField

https://gyazo.com/c42e22616d9c306acab92c742416a886.png

PlayStand++

https://gyazo.com/8abd64e12f203964e582cdc675b3fe45.png

PlayStand++の操作

https://gyazo.com/024b85c0aed15a9308436eaf2fd448fc.png

ビデオ: MouseField

新しいシステム: GoldFish

ITホワイトボックス (2011/6/19)

https://www.youtube.com/watch?v=1di7_2J8X0Y

https://gyazo.com/d3e79a8b457bc1544f0f5dc399e7c10b.png

https://gyazo.com/18b298f2b2a2851978504fcd46503938.png

GoldFishサーバ

TinyURL, Bit.ly的な動作

実行例1: マニュアルの表示

https://gyazo.com/a2dcd1bfa983b4c8b81e406085e59c47.png

https://gyazo.com/de0fe7498b3a1fe856e07002f9a7ae1b.png

実行例3: 回転インタフェース

https://gyazo.com/b06aee214b542952125f0d8a0ecb7abf.png

https://gyazo.com/f38d032e1c317e1bac30d52581b8317b.png

https://gyazo.com/ab301f469b9266c3f2d2ed07db3f7c22.png

https://gyazo.com/f00aef03e85ef6b1a838c527825a21fc.png

実世界コピペ

https://gyazo.com/96ed656fe1f1007c299ec3817f4fe8d1.png

センサ/組込みマイコン

Phidgets

USB接続のセンサ

https://gyazo.com/fef02a278bcd20cf8af4323fb2fbff8e.png

USB + PIC

Processingでプログラミング可能

https://gyazo.com/4b40c8c2b20ba85ab4862a93c15a6b87.png

Arduino

USB/Serial + AVR

https://gyazo.com/ba0f1f2dd89edcd0b5d9d2630fec4e04.png

Arduino Micro

https://gyazo.com/a49ee2e6b0ecb16faeaf45b9ae5d5b1d.png

Arduino + Bluetooth

https://gyazo.com/52298c7657576812dc4117be888b5909.png

LilyPad

ウェアラブルArduino

https://i.gyazo.com/d69ad7cad9a36bcd1e9cd4e315b7dd1a.png

LilyPad

https://gyazo.com/54cd28dda035ebee0eff4efc33ee8d51.png

mbed

Web上でプログラミング可能なワンボードマイコン

https://gyazo.com/d21d725a11af5e9cd6cdba2de538b7e8.png

Raspberry Pi

ARM搭載ワンボードマイコン

Linuxパソコンとして使える

https://gyazo.com/d4599f16fcb6a362b112b9428a1238c4

Intel Edison

https://gyazo.com/990178c9f83a96d1d2d779f40af7dbd0.png

TESSEL

JSが動く

https://tessel.io https://gyazo.com/8111116f4cd4a405f26c946597fbece6.png

TWE-Lite

http://tocos-wireless.com/jp/products/TWE-Lite-DIP/index.html http://gyazo.com/d91c8bb18096f173081fbaa5aa1170f0.png

「とわいらいと」

iBeacon

Bluetooth Low Energy利用

低電力でIDを飛ばすことができる

https://gyazo.com/0848c9a63fc580b748d9db6f89e6e065.png

https://gyazo.com/8921282d50d982e7e42f8d91301a4267.png

ESP32

https://gyazo.com/a258de453cfd3cae8c26df39f6c744ac

WiFi / Bluetooth

USBが無し

ダブルプロセッサ

私たちは、これからのPCの世界にはUSBは必要ないと考えています。無線で接続できればいいんです。

obniz

https://obniz.io/ https://gyazo.com/4e9cf89dc39b68fc8aae2f86b36679fb

WiFi, BLE, 表示器などを標準で搭載

M5Stack

https://gyazo.com/21da7030b9f452cfacd9229be6773e38

320 x 240 TFTカラーディスプレイ

microSDカードスロット

スピーカ

WiFi

Bluetooth

バッテリ

USB-C

M5Stack

https://www.youtube.com/watch?v=OR4qwGzzHAk

M5Stack

https://www.youtube.com/watch?v=Yu9A5pYnjCo

M5Stick

https://www.switch-science.com/catalog/5517/ https://gyazo.com/8d728b596ea3ed08f64fa572c6a1ef7e

EnOcean

https://gyazo.com/f4e03c5fd5aa1c8c2a4ccfc1cb9a5629 https://www.enocean.com/jp/

https://www.youtube.com/watch?v=xRUegA1FOdk

Lazurite

https://gyazo.com/99063b326e78aabc1dea82e5f935a89e http://www.lapis-semi.com/lazurite-jp/

Lazurite SubGHzは専用のLazurite IDEでプログラム開発を行うことができます。

Lazurite Pi Gatewayは、Node-RED, Ruby, Pythonなどの言語で簡単にプログラミングをすることができます。

消費電力が 小さい

BLE本

BLE + IoT

BLEで「最後の1メートル」が埋まる

http://www.amazon.co.jp/dp/4334038522 https://gyazo.com/ccf55d025ae941720ce068e51fccd0da.png

実世界システム分類

https://gyazo.com/109d773c66c6e1b997befb7afd6775ad.png

システム分類

AR系

紙系

家系

机系

ウェアラブル系

人系

流通系

画像配信系

写真共有系

サイネージ系

時間系

地図系

天気系

交通系

AR系

「電脳コイル」でポピュラーに

「AR Toolkit」で敷居が下がった

「セカイカメラ」で有名に

Webとの連携はまだ多くない

狭義のAugmented Reality

実世界画像にCG画像を重ねる

画像を重ねる手法

実物や自分の位置の認識手法

画像のずれや時間遅れを最小にする技法

3次元位置認識

https://gyazo.com/773ae2462931560d4e3b4e93f0c672c5.png

画像を重ねる技法

HMD(Head Mount Display)式

光学式

ビデオ式

モニタ式

光学式

https://gyazo.com/ec080c958162c33b69cde0ae023a722b.png

ビデオ式

https://gyazo.com/8d372110dd7fc20f090d12941c2db7cc.png

モニタ式

https://gyazo.com/154d11ef7331f9ab587bc0123b1e2edd.png

ARによる飛行機内配線 (Boeing)

https://gyazo.com/b8b941749e6bf7fe72355e2da1b42405.png

手術/診断での使用

https://gyazo.com/4780ba7625b1fe66f4bfc865df0d1015.png

https://gyazo.com/09ad4d27593bc6d7b784138fc583fa94.png

Karma

透過表示型のHMDを装着してプリンタのヘルプを参照

HMDとプリンタの位置関係を計測してCG画像を重ねる

https://gyazo.com/4780ba7625b1fe66f4bfc865df0d1015.png

https://gyazo.com/964840c4301f7351b9860792ae27006b.png

2次元バーコード利用NaviCam

実画像に計算機内の情報を加えてモニタに表示

2次元バーコードを用いてIDの位置と方向を認識

https://gyazo.com/c1e08d234e0b3777cb515b429c2b67b8.png

https://gyazo.com/b8bb2b373fb8679ff0f0adbe4cd1032c.png

ビデオ: 2次元バーコードによるAR

https://www.youtube.com/watch?v=cNFwEMkLK4A

電脳コイル

最近のブームの火付け役?

https://gyazo.com/cdbde78694cbedaa95b2a21469c128d0.png

ビデオ: 電脳コイル

https://www.youtube.com/watch?v=L2QgAGGk9ow

加藤 博一氏, Mark Billinghurst氏 @ Washington Univ.

1999〜

http://hondana.org/%E5%A2%97%E4%BA%95/4048673610 http://gyazo.com/8565dd98143823ef91b3032ed02b38fa.png

AR Toolkit

黒い枠の中の図形をタグとして利用

https://gyazo.com/a4acc4273131921070560aa1ec837987.png

https://gyazo.com/1710f89d0d46dddfbadd43c9fe771335.png

https://www.youtube.com/watch?v=yCCx7zANsGE

http://gyazo.com/788ed6a2f3313d09ab84acb2894c5b3e.png

Parallel Tracking and Mapping for Small AR Workspaces

http://www.youtube.com/watch?v=Y9HMn6bd-v8

初音ミクが家の前を...

https://www.youtube.com/watch?v=PkmjN6eyyHg

ポケモンGo

https://gyazo.com/c48914f2013ba325579b78a2869a2d33

ARKit

https://www.youtube.com/watch?v=khavGQ7Dy3c

ARKit

https://www.youtube.com/watch?v=GBds_Y9buxY

ARKit3

https://www.youtube.com/watch?v=vkS-VqAss4s

https://gyazo.com/4a730c80d833341dc3475d2b23d812fc.png

ビデオ: 星座表

https://www.youtube.com/watch?v=-mVl5Xd2DAw

https://gyazo.com/27b08ab05c3488f62c43defc365ab150.png

Oculus Quest

手品との融合 by Marco Tempest

https://gyazo.com/60245c53b318e4d42fcb9ebd2e0ca3aa.png

Video: AR Magic

https://www.youtube.com/watch?v=ZX8MBBohX3s

iPad手品

https://jp.techcrunch.com/2018/11/10/2018-11-09-this-magician-brings-some-serious-tricks-to-the-ipad-pro/ https://gyazo.com/30a1c6d002e8beb50ccd6f9b9e6a697c

紙系

普通の紙/ノート/黒板などを計算機と融合

紙データと計算機データの相互変換

紙インタフェースの例

XAX

Paper WWW

PaperLink

Audio Notebook

Pick-and-Drop

PaperIcon

Ultra Magic Key

IconSticker

CrossPad

PICO

AbsoluteMouse

XAX

計算機内データと紙データの相互変換

「DataGlyph」(目だたないバーコード)利用

バーコード付きのカバーシート利用

https://gyazo.com/d0243f8f84a08319331ecb2595bcf7bd.png

DataGlyph

https://gyazo.com/ca3a55e9f9c318992e646aa509398540.png

Paper WWW

紙に印刷したWebページに2次元バーコードを埋め込む

QRコード利用

PaperLink

VideoPen(小型カメラと蛍光ラインマーカを組みあわせたもの)利用

紙文書をハイパーテキストのように利用

マーカーで紙をなぞって領域指定

領域パタンにアクションを定義可能

未定義領域を指定するとOCRで引数指定

https://gyazo.com/cfc6d873934c2c6cee86c5535801479e.png

PaperLink製品版「LinkStick」

https://gyazo.com/260b8917fc87cd493574ebf6a7a08206.png

Audio Notebook

ノートに書いた文字のその時の音声をリンク

タブレット上のペンの動きと音声を記録

文字を書いたときの音声を参照可能

https://gyazo.com/aed599c86abf855bcf0e944ca5fc7142.png

Pick and Drop

異なる計算機間のCut/Paste

ペン計算機の画面上から図形を「Pick up」して別の計算機の画面に「Drop」する

c.f. Drag and Drop

Paper Icon

Pick and Dropにより紙上のデータを計算機にコピー

https://gyazo.com/c4b3996190e594d3873edf118bf15e76.png

Ultra Magic Key

情報を印刷した紙を指で操作

カメラで指認識

https://gyazo.com/8aebe3e79bc8f85c2bb326745ee1a138.png

IconSticker

画面上のアイコンをバーコード付きアイコンとして印刷

任意の場所に貼りつけて実世界内アイコンとして使用

https://gyazo.com/4a53f0ab6cc40a4954ca83a1a4892d2b.png

PICO

セガの子供用ゲーム機

絵本の上をペンでなぞるとテレビ上の画面が変化

https://gyazo.com/49ae2f2daedd4b10a944316ccace33db.png

CrossPad

Cross/IBMの製品

タブレット上の紙の上で字/絵をかくと書いたものがすべて記録され計算機に送出可能

https://gyazo.com/3da99a0dd3617337881b8e692678c44e.png

Decrio

PalmPilotとCrossPadを一体化

https://gyazo.com/be188671940e6f954f343dd31c6b4f43.png

https://gyazo.com/b033ff77dd8c884987909ee9a70ecbf6

https://www.youtube.com/watch?v=zK0MCU9Fb7s

家系

TRONハウス

PAPI

AwareHome

お茶ハウス

NICTハウス

TRON電脳住宅

ホームオートメーション実験 (1989〜1993)

TRONハウス

http://monotsukuri.net/mirai98/tron/tron.htm http://gyazo.com/7cadad163bb89f8a8125f5420df4c244.png

ホームオートメーション実験 (1989〜1993)

自動調味料装置

https://gyazo.com/c1e6505e7f5412831e32c4000d2ec910

地下に移動コンテナを沢山格納するストレージがあって呼び出すことができる!

https://www.youtube.com/watch?v=7jPKEyM44GU

https://www.youtube.com/watch?v=Th_vyQVTlcE

AwareHome

Georgia Techのプロジェクト

実際の家で各種の実世界インタフェースの実験

https://gyazo.com/ded4c3f883c28a5783813b304e8a315b.png

AwareHome

https://www.youtube.com/watch?v=70HrRnGCNWc

AwareHome

https://gyazo.com/29c4274bb0bd26327bb1d997ff4f0519.png

AwareHome

https://gyazo.com/25d67ff021bf8b9256bb5b80737daed7.png

AwareHome

https://gyazo.com/448cddccc02d09445f51cf870a9d85b0.png

https://gyazo.com/67e06c7bcd39af9e536d0098235c2d78.png

https://gyazo.com/b3e7bc9ece60d5524372ddb2f318e2b0.png

キッチン

https://gyazo.com/6a3f6d4ab7f0372546be9571bf69d4c4.png

床

http://masui.org.s3.amazonaws.com/0/5/0589d3d94fe0514fa5558a3fc1c4ff73.png

風呂

http://masui.org.s3.amazonaws.com/8/8/88c9d8970127c3c40aebe763e4c029e2.png

京都産業大学のプロジェクト

http://www.kyoto-su.ac.jp/liaison/kenkyu/images/message56_04_full.jpg

https://gyazo.com/e2460f2a2401a70858deac084942fe0f.png

ビデオ: 大画面ディスプレイ

https://www.youtube.com/watch?v=Sc8dkeFjlWM

Georgia Techのプロジェクト

実際の家で各種の実世界インタフェースの実験

https://gyazo.com/c3eadc92f8e5945ff0076c9d3faa188d.png

https://gyazo.com/0cf5821611616846092fdeda2a4ae56f.png

未来のキッチン

https://i.gyazo.com/31144a22f923a8e74b518190fa2f3346.png

MakeupMirror

https://gyazo.com/918099c634a13ee7a3fe0e70a9542d65.png

SyncTrash

https://gyazo.com/8deb4f91d4d97e7eb8662465f1fa2ba5.png

なめらカーテン

https://gyazo.com/2dddbe835a62b9774b2b581e9efadcdb.png

机系

机上に計算機画面を投影

机の上のデータ/操作と計算機内のデータ/操作を融合

システム例

DigitalDesk

InteractiveDESK

InfoBinder

DigitalDesk

机上にプロジェクタとカメラを設置

紙や指を認識しつつ画面を投影

https://gyazo.com/1fcaced1228e3d10eb0402e2a3e99d30.png

InteractiveDESK

机上に投射した計算機画面をペンで操作

キーボードを机上に置くと前面のモニタが使えるようになる

InfoBinder

紙ばさみやマウスのように動作するInfoBinderデバイスを指のかわりに使用

仮─データを移動

閉じて別の実物に格納

https://gyazo.com/4405fdc3481de5bea2091f2a3c3cad50.png

MetaDesk

Phicon (= Physical Icon)を入力に使用

プロジェクタから背面投射された机

https://gyazo.com/f341c5536bd26aad812719092003d870.png

https://gyazo.com/6e28f9a4e0dcb328727be90997ae2aff.png

PingPongPlus

卓球台の上にプロジェクタで画像を投影

台の四隅のマイクで玉が当たった位置を検出

https://www.youtube.com/watch?v=AZO8sfmpKIQ

プロジェクタとカメラの組みあわせ

レンズによる光線のシミュレーション

https://gyazo.com/0c28614690d3b2d676e059bab0bc14e1.png

Piano

https://www.youtube.com/watch?v=4mM04UscQxc

inFORM

http://tangible.media.mit.edu/project/inform/ https://gyazo.com/f7c503717d02e1924bca4251826b8fd0.png

https://www.youtube.com/watch?v=krq_8D94ifY

ビデオ: TRANSFORM

https://www.youtube.com/watch?v=lCARHatJQJA

ビデオ: Radical Atoms

https://www.youtube.com/watch?v=9w7tQ-ZJF_E

Pattie Maes

https://gyazo.com/ca690c2e0f39352c0f26457bed4decba.png

https://www.youtube.com/watch?v=YrtANPtnhyg

MicrosoftのAR

半透明HMD

Video: HoloLens

https://www.youtube.com/watch?v=IgtHnCJJUMU

https://gyazo.com/050f36bcdd9bf8956bf40b038f67a1a4

https://www.youtube.com/watch?v=KK42C6OqJvQ

https://www.youtube.com/watch?v=Vrq2akzdFq8

https://www.youtube.com/watch?v=q_8g0H4IksU

Magic Leap

https://www.youtube.com/watch?v=kw0-JRa9n94

Magic Leap

https://www.youtube.com/watch?v=kPMHcanq0xM

Magic Leap

https://www.facebook.com/ryukbk/posts/2574622092606817 https://gyazo.com/3ace0087b8f82f9b15a7f19e5ff8be6d

Wearable Computer系

計算機を「着て」使う

計算機は常に動いている (e.g. 腕時計)

Wearable Computerのアプローチ

携帯端末的アプローチ

小型計算機を持ち歩いて使う

Augmented Reality的アプローチ

人間の能力を増強

会った人を忘れない

目では見えない情報が見える

位置情報などを活用

ファッションショー

携帯端末的Wearable Computer

IBMの超小型PC

音声入力

MITのWearable6人衆

Thad, Steve, Sandy, Brad, Lenny, Rehmi

トロント大学12人衆?

https://gyazo.com/0036204ca26c10a9ad5f45035def0b0e.png

Google Glass

http://www.youtube.com/watch?v=9c6W4CCU9M4

https://gyazo.com/72bc27b1ab8a51cc308edb241a8c2d58.png

塚本氏 @ 神戸大

https://gyazo.com/6913ff3ae749f74631c0f96726b828ad.png

http://gyazo.com/6f292ee4983d3ee055fd071b25fe69de.png

https://gyazo.com/b20b6e73e5a20649f78bb41934b8ee09.png

その他のWearable Computer

人系

ソーシャルネットワーク

実世界集合知

流通系

配送追跡

配達状況をWebでチェック

画像配信系

動画配信

ustreamなど

Webカメラ

写真系

写真共有

地図との連携

サイネージ系

公共ディスプレイ利用

時間系

宴会サポート

予定表サポート

地図系

各種地図サービス

Google Maps, Yahoo Maps

Google Street View

リモートセンシング

位置情報サービス

現在地を知る

GPS応用

Geocoding

位置情報と認証

どこに行ったかを認証に利用

実世界的情報(写真とか)を認証に利用

天気系

天気予報

天気情報

交通系

自動車

電車

運行状況の確認など

家具コンピューティング

増井研究会のテーマ

生活の邪魔にならない家具でUbiComp

GoldFishなどを利用

https://gyazo.com/352cfed8851e4e3d17be3f39693c8a15.png

長屋コンピューティング

我慢して住めるか?

https://gyazo.com/498cf3e4b9c769d7aa35299b5c7cf213.png

これなら満足?

https://gyazo.com/498cf3e4b9c769d7aa35299b5c7cf213.png

Wifi完備

障子がスクリーン

神棚にサーバ

あちこちのセンサでKB入力

自動冷暖房

電子書籍

コンビニで冷蔵庫不要

良いレストランがいくらでも

近所にスーパー銭湯

Gear

2個のスイッチだけで階層コンテンツナビゲーション

https://gyazo.com/ab4ff7c2d44f4af2bb94fae76589f495.png

Demo: Serencast

Magicknock

https://www.youtube.com/watch?v=zwBHexqYLG4

IoTの現状

by 坂村健

http://dol.ismcdn.jp/mwimgs/8/8/670m/img_881643ea16a0670f95774a6457dc6ee06718695.jpg http://diamond.jp/articles/-/130230

将来展望

あらゆる可能性がある

新しいインタラクションが必要

実世界プログラミングも必要

真剣な研究が必要!

実用は近い!